<!DOCTYPE html>
{% autoescape true %}
<html data-ng-app="ma-forcebuilder">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.1.5/angular-resource.min.js"></script>
    <script src="/lib/angular-ui-router.min.js"></script>
    <script src="/js/app.js"></script>
    <script src="/js/controllers.js"></script>
    <script src="/js/filters.js"></script>
    <script src="/js/services.js"></script>
    <link href="/css/core.css" rel="stylesheet" type="text/css" />
    <link href="/css/generated.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>MA ForceBuilder</div>
<div data-ng-controller="FactionController">
    <label>Select a Faction</label>
    <select data-ng-model="faction"
            data-ng-options="faction.label for faction in factions"
            data-ng-change="updatePath(faction)"></select>
    <div>
        <span>Faction from controller is: {[{ faction }]} </span>
        <div class="factionIco" data-ng-class="faction.name"></div>
    </div>
</div>

<hr />
<div ui-view="unit-list"></div>
<hr />
<div ui-view="unit-details"></div>
<hr />
<div ui-view="army-list"></div>

</body>
</html>
{% endautoescape %}